<template>
  <Page header="任务详情" :isBack="true">
    <div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
      <div style="flex-grow: 1;overflow:hidden ">
        <scroll-view scroll-y="true" style="height: 100%">
          <div class="detail-card">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">{{ taskDetail.name }}</div>
                <div style="font-weight: bold;flex-shrink: 0;display: flex;justify-content: flex-end;align-items: center;padding:0 24rpx">
                  {{ taskRecordDetail.status_text }}
                </div>
              </div>
              <div class="card-body">
                <div class="item">
                  <div class="content">
                    <div style="margin-bottom: 24rpx">
                      周期： {{ taskDetail.expect_start_time }} ~ {{ taskDetail.expect_finish_time }}
                    </div>
                    <div style="margin-bottom: 24rpx">
                      服务类目： {{ taskDetail.serve_type_name }}
                    </div>
                    <div style="margin-bottom: 24rpx">
                      所属供应商： {{ taskDetail.supplierName }}
                    </div>
                    <div style="margin-bottom: 24rpx">
                      描述： {{ taskDetail.description }}
                    </div>
                    <div style="margin-bottom: 24rpx">
                      附件：
                    </div>
                    <div class="file-list">
                      <div class="file-item" v-for="file in taskDetail.fileLsit">
                        <image @click="viewImage(file)" class="pdf" :src="getFileIcon(file)" alt="" />
                        <div class="file-info">
                          <!--                    <div class="file-name">{{ file }}</div>-->
                          <!--                    <div class="file-line"></div>-->
                        </div>
                        <image @click="downLoadFile(file)" class="download" src="/static/icon/download.png" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-card">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">处理信息</div>
              </div>
              <div class="card-body" style="padding:0 24rpx">
                <u-form :model="taskRecordDetail" ref="uForm" label-position="top">
                  <u-form-item label="备注">
                    <u-input v-model="taskRecordDetail.remark" type="textarea"/>
                  </u-form-item>
                  <u-form-item label="附件">
                    <u-upload :disabled="!isAllow" :action="action" max-count="99" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
                    <div v-if="!isAllow" class="avatar-list" style="display: flex;align-items: center">
                      <div :class="['avatar-item']" v-for="item in fileList" style="margin: 0 10rpx">
                        <image @click="viewImage(item.url)" :src="item.url" mode="heightFix" ></image>
                      </div>
                    </div>
                  </u-form-item>
                </u-form>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div v-if="isAllow" class="button-group" style="flex-shrink: 0;display: flex;align-items: center;justify-content: space-around">
        <div class="primary-button large" style="width: 40%" @click="saveTaskRecord">保存</div>
        <div class="primary-button large" style="width: 40%;background-color: red" @click="submitTaskRecord">提交</div>
      </div>
    </div>
  </Page>
</template>
<script>
import Page from "../../components/Page.vue";
import { mapGetters } from 'vuex';
export default {
  name: "index",
  components: {Page},
  data() {
    return {
      taskDetail: {
        name: '工单标题',
        start_time: '2021-01-01',
        end_time: '2021-01-02',
        description: '一段任务描述',
        serve_type_name: '服务类目',
        file_url: [
          {
            name: 'xxxx.pdf'
          }
        ]
      },
      taskRecordDetail: {
        fileList: []
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'token']),
    isAllow() {
      return this.taskRecordDetail.status === 2
    }
  },
  onLoad({ taskId, id }) {
    this.getTask(taskId)
    this.getTaskRecord(id)
  },
  methods: {
    successFile(e) {
      this.taskRecordDetail.fileList.push(e.data.url)
      console.log('this.taskRecordDetail.fileList',this.taskRecordDetail.fileList)
    },
    removeFile(index) {
      console.log('index',index)
      this.taskRecordDetail.fileList.splice(index, 1)
    },
    getTask(id) {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.getTaskDetail(id).then(res => {
        if (res.supplier) {
          res.supplierName =  res.supplier.name
        }
        if (res.file_url) {
          res.fileLsit = res.file_url.split(',')
        }
        this.taskDetail = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    getTaskRecord(id) {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.getTaskRecordDetail(id).then(res => {
        if (res.files) {
          this.fileList = res.files.split(',').map(url => {
            return {
              url
            }
          })
          console.log(this.fileList)
          res.fileList = res.files.split(',')
        } else {
          res.fileList = []
        }
        this.taskRecordDetail = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    downLoadFile(name) {
      console.log('previewFile', name)
      // 复制链接
      uni.setClipboardData({
        data: name,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    viewImage(file) {
      console.log('viewImage', file)
      uni.previewImage({
        urls: [file]
      })
    },
    saveTaskRecord() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/user/login'
              })
            }
          }
        })
        return
      }
      let that = this
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      that.$api.saveTaskRecord({
        id: that.taskRecordDetail.id,
        remark: that.taskRecordDetail.remark,
        files: that.taskRecordDetail.fileList.join(','),
      }).then(res => {
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      }).finally(() => {
        setTimeout(() => {
          uni.hideLoading()
        }, 1000)
      })
    },
    submitTaskRecord() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/user/login'
              })
            }
          }
        })
        return
      }
      let that = this
      // 确认对话框
      uni.showModal({
        title: '提示',
        content: '任务已完成，确认提交吗？',
        showCancel: true,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            uni.showLoading({
              title: '加载中',
              mask: true,
              duration: 0
            })
            that.$api.submitTaskRecord({
              id: that.taskRecordDetail.id,
              remark: that.taskRecordDetail.remark,
              files: that.taskRecordDetail.fileList.join(','),
            }).then(res => {
              that.taskRecordDetail.status = 3
              uni.showToast({
                title: '提交成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }).finally(() => {
              setTimeout(() => {
                uni.hideLoading()
              }, 1000)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
  }

}
</script>

<style lang="scss">
.page {
  .avatar-list {
    .avatar-item {
      width: 160rpx;
      height: 160rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

.detail-card {
  margin: 20rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
}
  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;
    .card-header {
      height: 128rpx;
      padding-left: 12rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #E6E6E6;
      .line {
        width: 8rpx;
        height: 36rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #303030;
        text-align: left;
        padding-left: 20rpx;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }

    }
    .card-body {
      .item {
        padding: 50rpx;
      }
      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }

  .file-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    .file-info {
    }
    .file-item {
      margin-right: 20rpx;
      margin-top: 20rpx;
      width: 120rpx;
      height: 160rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .pdf {
        width: 50px;
        height: 50px;
      }
      .preview,
      .download {
        width: 14px;
        height: 13px;
        margin-top: 12rpx;
        //position: absolute;
        //right: 4px;
        //top: 50%;
        //transform: translateY(-45%);
      }
      .preview {
        width: 18px;
        height: 18px;
        right: 28px;
      }
      .file-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .file-name {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 16px;
          color: #262626;
          padding-right: 40px;
        }
        .file-size {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 14px;
          color: #9D9D9D;
          padding-right: 40px;
        }
        .file-line {
          width: 100%;
          height: 2px;
          opacity: 1;
          background: #EBEBEB;
        }
      }
    }
  }

}
</style>
